<template>
  <div class="app">
    <!-- navbar区域 -->
    <van-sticky>
      <van-nav-bar
        v-show="$route.meta.isShowNavBar"
        :title="$route?.meta?.title || 'letao商城'"
        :left-arrow="$route.meta.isShowBackIcon"
        @click-left="$router.back()"
      />
    </van-sticky>

    <!-- 路由匹配区 -->
    <router-view></router-view>

    <!-- 障眼法顶开50像素 -->
    <div class="empty" v-if="$route.meta.isShowTabBar"></div>
    <!-- tabbar区域 -->
    <van-tabbar v-model="active" active-color="#ee0a24" v-show="$route.meta.isShowTabBar" route>
      <van-tabbar-item icon="wap-home-o" to="/home">首页</van-tabbar-item>

      <van-tabbar-item to="/category">
        <span>分类</span>
        <template #icon="props">
          <img class="cate-icon" :src="props.active ? icon.active : icon.unactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="cart-o" to="/shopcar" :badge="$store.getters.getCarNumber">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      icon: {
        // eslint-disable-next-line no-undef
        active: require('@/assets/images/category-active.png'),
        // eslint-disable-next-line no-undef
        unactive: require('@/assets/images/category-unactive.png'),
      },
      active: 0,
      online: navigator.onLine,
    }
  },
  methods: {
    updateNetworkStatus(event) {
      if (event.type === 'offline') {
        this.$toast('没网了')
      }
      // 更新网络状态
      this.online = event.type === 'online' ? true : false
    },
  },
  mounted() {
    window.addEventListener('online', this.updateNetworkStatus)
    window.addEventListener('offline', this.updateNetworkStatus)
  },
  beforeDestroy() {
    window.removeEventListener('online', this.updateNetworkStatus)
    window.removeEventListener('offline', this.updateNetworkStatus)
  },
}
</script>

<style lang="scss">
.app {
  .empty {
    height: 50px;
  }

  .cate-icon {
    width: 22px;
    height: 22px;
  }
}

// 滚动条样式
::-webkit-scrollbar {
  width: 0;
}
</style>
